import React from 'react'
import { Tabs, WhiteSpace } from 'antd-mobile';
import queryString from 'query-string'
import Css from '../style/common.module.css'
import Play from '../img/播放.png'
import Select from '../img/多选框.png'
import Videoplay from '../img/视频播放.png'
import More from '../img/更多.png'



class Demo extends React.Component {
  constructor(){
    super()
    this.state={
      arr:[]
    }
  }
componentWillMount(){
    let {search}=this.props.location
    let query=queryString.parse(search)
    console.log(query.keywords)
    fetch(`http://106.12.79.128:666/search?keywords=${query.keywords}`)
    .then(body=>body.json())
    .then(res=>{
        console.log(res.result.songs)
        this.setState({
          arr:res.result.songs
        })
    })
}



  renderContent = tab =>
    (<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '150px', backgroundColor: '#fff' }}>
      <p>Content of {tab.title}</p>
    </div>);

  render() {
    const tabs = [
      { title: '综合' },
      { title: '单曲'},
      { title: '云村' },
      { title: '视频' },
      { title: '歌手' },
      { title: '专辑' },
      { title: '歌单' },
      { title: '主播电台' },
      { title: '用户' },
    ];

    try{
      console.log(this.state.arr)
    }catch(e){}

    return (
      <div>
        <WhiteSpace />
        <Tabs tabs={tabs} renderTabBar={props => <Tabs.DefaultTabBar {...props} page={3} />}>
          <div className={Css.Danqu}>
              <div className={Css.playAll}>
                <div className={Css.left}>
                  <img src={Play} alt="" className={Css.playImg}/>
                  <p className={Css.playP}>播放全部</p>
                </div>
                <div className={Css.right}>
                  <img src={Select} alt="" className={Css.selectImg}/>
                  <p className={Css.selectAll}>多选</p>
                </div>
              </div>

                {/* {this.state.arr.map((item,index)=>{
                    return( 
                      <div className={Css.song} key={index}>
                        <div className={Css.songLeft}>
                          <p className={Css.name1}>{item.name}</p>
                          <p className={Css.name2}>{item.artists[0   ].name}</p>
                        </div>
                        <div className={Css.songRight}>
                          <img src={Videoplay} alt="" className={Css.videoImg}/>
                          <img src={More} alt="" className={Css.moreImg}/>
                        </div>
                      </div>
                    )
                })
              } */}


              <div className={Css.song}>
                <div className={Css.songLeft}>
                  <p className={Css.name1}>海阔天空</p>
                  <p className={Css.name2}>海阔天空</p>
                </div>
                <div className={Css.songRight}>
                  <img src={Videoplay} alt="" className={Css.videoImg}/>
                  <img src={More} alt="" className={Css.moreImg}/>
                </div>
              </div>
             
             
              <div className={Css.song}></div>
          </div>


          <div></div>
        </Tabs>
        <WhiteSpace />
      </div>
    );
  }
}

export default Demo